<template>
  <div>
    <a-modal
      :maskClosable="false"
      :title="title"
      width="75vw"
      centered
      :bodyStyle="{
        padding: '0 24px'
      }"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
      <a-card
        :bordered="false"
        :bodyStyle="{
          padding: '10px 24px'
        }"
        style="width: 100%; height: 80vh; overflow-y: auto;"
      >
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="10">
              <a-col :md="6" :sm="24">
                <a-form-item label="单据编号">
                  <a-input placeholder="请输入单据编号" v-model="queryParam.billNo"
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="销售方单位">
                  <select-company-input :disabled="!!sellerUnit" v-model="queryParam.sellerUnit" placeholder="请选择销售方单位"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="购货方单位">
                  <select-customer-input placeholder="请选择购货方单位" commercialType="1" v-model="queryParam.buyerUnit"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="经营团队">
                  <select-team-input
                    :disabled="!!teamId"
                    placeholder="请输入经营团队"
                    :teamType="0"
                    v-model="queryParam.teamId"
                  />
                </a-form-item>
              </a-col>
              <a-col span="6">
                <a-button @click="searchByquery" type="primary" icon="search">查询</a-button>
                <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          ref="table"
          rowKey="id"
          :scroll="scrollTrigger"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelectOne, onChange: onSelectChange,type: getType}"
          @change="handleTableChange"
          class="j-table-force-nowrap"
          wrapClassName="ant-modal-cust-warp"
        >
              <span slot="detail" slot-scope="text, record">
                <a @click="getDetail(record.id)">详情</a>
              </span>
        </a-table>

      </a-card>

    </a-modal>
    <ErpFinanceInvoiceBillPenetrate ref="invoiceBillPenetrate"></ErpFinanceInvoiceBillPenetrate>
  </div>
</template>

<script>
import {filterObj} from '@/utils/util';
import {queryDepartTreeList, searchByKeywords} from '@/api/api';
import {getAction} from '@/api/manage';
import {mapGetters} from 'vuex';
import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput';
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput';
import ErpFinanceInvoiceBillPenetrate from '@views/scy/penetrate/ErpFinanceInvoiceBillPenetrate';
import SelectTeamInput from '@/views/scy/components/SelectTeamInput';

export default {
  name: "SelectFinanceInvoiceBillInputModal",
  components: {
    SelectCustomerInput,
    SelectCompanyInput,
    ErpFinanceInvoiceBillPenetrate,
    SelectTeamInput
  },
  props: ['multi', 'urlList', 'sellerUnit', 'teamId'],
  watch: {
    visible(){
      console.log("visible----->",this.visible)
      if(this.visible){
        this.$set(this.queryParam, 'sellerUnit', this.sellerUnit);
        this.$set(this.queryParam, 'teamId', this.teamId);
        this.searchByquery();
      }else {
        this.$set(this.queryParam, 'billNo', null);
        this.$set(this.queryParam, 'buyerUnit', null);
      }
    }
  },
  data() {
    return {
      title: "关联开票申请单",
      queryParam: {},
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
          customCell: (record, index) => {
            let that = this;
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = [];
                  that.selectedRowKeys.push(record.id);
                  that.choseObj = [];
                  that.choseObj.push(record);
                }
              }
            }
          }
        },
        {
          title: '单据编号',
          align: "center",
          dataIndex: 'billNo',
          customCell: (record, index) => {
            let that = this;
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = [];
                  that.selectedRowKeys.push(record.id);
                  that.choseObj = [];
                  that.choseObj.push(record);
                }
              }
            }
          }
        },
        {
          title: '销售方单位',
          align: "center",
          dataIndex: 'sellerUnit_dictText',
          customCell: (record, index) => {
            let that = this;
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = [];
                  that.selectedRowKeys.push(record.id);
                  that.choseObj = [];
                  that.choseObj.push(record);
                }
              }
            }
          },
        },
        {
          title: '购货方单位',
          align: "center",
          dataIndex: 'buyerUnit_dictText',
          customCell: (record, index) => {
            let that = this;
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = [];
                  that.selectedRowKeys.push(record.id);
                  that.choseObj = [];
                  that.choseObj.push(record);
                }
              }
            }
          },
        },
        {
          title: '开票金额（元）',
          align: "center",
          dataIndex: 'invoiceTotalAmount',
          customCell: (record, index) => {
            let that = this;
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = [];
                  that.selectedRowKeys.push(record.id);
                  that.choseObj = [];
                  that.choseObj.push(record);
                }
              }
            }
          }
        },
        {
          title: '发票类型',
          align: "center",
          dataIndex: 'invoiceCategory_dictText',
          customCell: (record, index) => {
            let that = this;
            return {
              on: {
                click: () => {
                  that.selectedRowKeys = [];
                  that.selectedRowKeys.push(record.id);
                  that.choseObj = [];
                  that.choseObj.push(record);
                }
              }
            }
          }
        },
        {
          title: '详情',
          align: "center",
          dataIndex: 'detail',
          scopedSlots: {customRender: 'detail'}
        }
      ],
      url: {},
      dataSource: [],
      choseObj: [],
      departTree: [],
      selectedKeys: [],
      iExpandedKeys: [],
      orgCode: '',
      loading: false,
      treeData: [],
      checkedKeys: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      scrollTrigger: {x: true},
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      toggleSearchStatus: false,
      dictOptions: {},
    }
  },
  created() {
    this.loadData();
    // 该方法触发屏幕自适应
    this.resetScreenSize();
    this.refresh();
    this.initSource();
    //加载数据字典信息
    this.initDictConfig();
  },
  computed: {
    // 计算属性的 getter
    getType: function () {
      console.log("multi: ", this.multi);
      return this.multi == true ? 'checkbox' : 'radio';
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    initDictConfig() {

    },
    getDetail(id) {
      this.$refs.invoiceBillPenetrate.initData(id)
      this.$refs.invoiceBillPenetrate.visible = true;
    },
    add(selectObj, ids) {
      this.visible = true;
      this.edit(selectObj, ids);
    },
    edit(selectObj, ids) {

      if (!ids) {
        this.selectedRowKeys = []
      } else {
        this.selectedRowKeys = ids;
      }
      if (!selectObj) {
        this.selectionRows = []
      } else {
        this.selectionRows = selectObj;
        this.choseObj = selectObj;
      }
      if (ids == null && selectObj == null) {
        this.selectionRows = [];
        this.choseObj = [];
        this.selectedRowKeys = [];
      }
    },
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      params.sysOrgCode = this.orgCode;
      params.checkStatus = 2; //审核成功
      // fix:BUG#4850 【开票申请单】关联已开票申请单根据申请公司、费用所属团队筛选错误(不只查自己的单子) start
      // params.proposer = this.userInfo().empId; //当前登录人
      // fix:BUG#4850 【开票申请单】关联已开票申请单根据申请公司、费用所属团队筛选错误(不只查自己的单子) end
      getAction(this.urlList, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
          if (this.orgCode === '') {
            //第一次打开
          } else {
            for (var i = 0; i < this.dataSource.length; i++) {
              console.log(this.dataSource[i]);
              for (var j = 0; j < this.choseObj.length; j++) {
                if (this.choseObj[j].id == this.dataSource[i].id) {
                  this.selectionRows.push(this.dataSource[i]);
                  this.selectedRowKeys.push(this.dataSource[i].id);
                  break;
                }
              }
            }
          }
          //判断是否当前页没有数据且不为第一页
          if (this.dataSource.length == 0 && this.ipagination.current != 1) {
            this.ipagination.current = this.ipagination.current - 1
            this.loadData(this.ipagination.current - 1);
          }
        }
      })
    },
    loadTree() {
      var that = this
      that.treeData = []
      that.departTree = []
      queryDepartTreeList().then((res) => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.treeData.push(temp)
            that.departTree.push(temp)
            that.setThisExpandedKeys(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    getQueryField() {
      let str = "id,";
      for (let a = 0; a < this.columns.length; a++) {
        str += "," + this.columns[a].dataIndex;
      }
      return str;
    },
    onSelectAll(selected, selectedRows, changeRows) {
      if (selected === true) {
        for (var a = 0; a < changeRows.length; a++) {
          this.choseObj.push(changeRows[a]);
        }
      } else {
        for (var b = 0; b < changeRows.length; b++) {
          this.choseObj.splice(this.choseObj.indexOf(changeRows[b]), 1);
        }
      }
      // console.log(selected, selectedRows, changeRows);
    },
    onSelectOne(record, selected) {
      console.log(record, selected)
      if (selected === true) {
        if (this.multi) { //多选
          this.choseObj.push(record);
        } else {  //单选
          this.choseObj = [];
          this.choseObj.push(record);
        }
      } else {
        if (this.multi) { //多选
          var index = -1;
          for (var i = 0; i < this.choseObj.length; i++) {
            if (this.choseObj[i].id == record.id) {
              index = i;
              break;
            }
          }
          //console.log();
          if (index >= 0) {
            this.choseObj.splice(index, 1);
          }
        } else { //单选
          this.choseObj = [];
        }
      }
    }, initSource() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.choseObj = [];
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      console.log(this.selectedRowKeys);
      this.selectionRows = selectionRows;
    },
    searchReset() {
      let that = this;
      this.$set(this.queryParam, 'billNo', null);
      this.$set(this.queryParam, 'buyerUnit', null);
      that.loadData(1);
    },
    handleTableChange(pagination, filters, sorter) {
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },
    handleCancel() {
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.visible = false;
    },
    handleOk() {
      this.$emit("choseObj", this.choseObj);
      this.handleCancel();
    },
    searchByquery() {
      this.loadData(1);
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
    onSearch(value) {
      let that = this
      if (value) {
        searchByKeywords({keyWord: value}).then((res) => {
          if (res.success) {
            that.departTree = []
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.departTree.push(temp)
            }
          } else {
            that.$message.warning(res.message)
          }
        })
      } else {
        that.loadTree()
      }

    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]];
      }
      let record = e.node.dataRef;
      // this.selectionRows.push(record.id);
      this.onClearSelected();
      this.open(record);
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    open(record) {
      console.log(record);
      this.orgCode = record.orgCode;
      this.loadData(1);
    },
    // 触发屏幕自适应
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.scrollTrigger = {x: 800};
      } else {
        this.scrollTrigger = {};
      }
    }, allObj() {
      this.selectedKeys = [];
      this.onClearSelected();
      this.orgCode = null;
      this.loadData(1);
    }
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}

.anty-img-wrap > img {
  max-height: 100%;
}

</style>